<template>
	<view class="content">
		<view class="tab-box">
			<u-tabs :list="tabList" @click="tabChange" :scrollable="false" lineColor="#4871C0" :current="activeIndex"
				lineWidth="70rpx" lineHeight="5rpx" :activeStyle="{
			    color: '#4871C0',
			    fontWeight: 'bold',
				fontSize:'28rpx',
			}" :inactiveStyle="{
			    color: '#999999',
				fontSize:'28rpx',
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:30%;padding-bottom:10rpx;"></u-tabs>
		</view>
		<!-- 已结束 -->
		<view class="list" v-if="activeIndex == 0 ">
			<view class="list-item" v-for="(item,index) in dataList1" :key="index" @click="godetails(item.id)">
				<view class="item-tile">
					<view class="item-img">
						<u--image :src=item.user.avatar shape="circle" width="44rpx" height="44rpx">
						</u--image>
					</view>
					<view class="title">{{item.title}}</view>
					<text v-if="item.status == 1" class="state state1">待进行</text>
					<text v-if="item.status == 8" class="state state2">进行中</text>
					<text v-if="item.status == 9" class="state state3">已结束</text>
					<text v-if="item.status == -1" class="state state3">已取消</text>
					<text v-if="item.status == 0" class="state state4">草稿</text>
					<text v-if="item.status == 2 || item.status == 3" class="state state5">待审核</text>
					<text v-if="item.status == 21 || item.status == 31" class="state state6">被驳回</text>
				</view>
				<view class="item-info">
					<view class="address">
						{{item.type_name}} I {{item.room.title}}
					</view>
					<view class="time">
						{{item.time}}
					</view>
					<!-- <view class="item-button" @tap.stop="gotouploadTopics()">
						<text>上传议题</text>
					</view>
					<view class="item-button" @tap.stop="gotoTopics()">
						<text>查看议题</text>
					</view>
					<view class="item-button" @tap.stop="">
						<text>修改议题</text>
					</view> -->
					<view class="u-flex">
						<view v-if="item.type==3 && (item.status == 1 || item.status == 8 || item.status == 9)"
							class="item-button" @tap.stop="gotoPlan(item.id)">
							<text>部门工作计划</text>
						</view>
						<!-- <view v-if="item.is_topic==1" class="item-button" @tap.stop="gotoTopics(item.id)">
							<text>查看议题</text>
						</view> -->
					</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<u-loadmore v-if="dataList1.length" :status="loadStatus" />

			<u-empty v-if="!dataList1.length && !isLoading" mode="data"
				icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
		<!-- 我发布的 -->
		<view class="list" v-if="activeIndex == 1 ">
			<view class="list-item" v-for="(item,index) in dataList2" :key="index" @click="godetails(item.id)">
				<view class="item-tile">
					<view class="item-img">
						<u--image :src=item.user.avatar shape="circle" width="44rpx" height="44rpx">
						</u--image>
					</view>
					<view class="title">{{item.title}}</view>
					<text v-if="item.status == 1" class="state state1">待进行</text>
					<text v-if="item.status == 8" class="state state2">进行中</text>
					<text v-if="item.status == 9" class="state state3">已结束</text>
					<text v-if="item.status == -1" class="state state3">已取消</text>
					<text v-if="item.status == 0" class="state state4">待上传</text>
					<text v-if="item.status == 2 || item.status == 3" class="state state5">待审核</text>
					<text v-if="item.status == 21 || item.status == 31" class="state state6">被驳回</text>
				</view>
				<view class="item-info">
					<view class="address">
						{{item.type_name}} I {{item.room.title}}
					</view>
					<view class="time">
						{{item.time}}
					</view>
					<view class="moreAction" v-show="item.ismore">
						<view v-if="item.sign_way > 0 && item.role_type == 1 &&  item.status == 9"
							class="button-item1" @click.stop="dosignListOut(item)">
							<text>导出签到</text>
						</view>
					</view>
					<view  class="u-flex" style="align-items: center;justify-content: space-between;">
						<view @click.stop="isclickmore(index)" v-if="item.sign_way > 0 && item.role_type == 1 &&   item.status == 9">
							<text style="color:#999999;font-size: 12px;" >更多</text>
						</view>
						<view class="u-flex" style="justify-content: end!important;flex:1;">
							<view v-if="item.sign_way > 0 && item.role_type == 1 && (item.status == 8||item.status == 1)"
								class="item-button" @click.stop="dosignListOut(item)">
								<text>导出签到</text>
							</view>
							<view class="item-button" v-if="item.role_type == 1 && item.status == 9 && item.is_jiyao == 0"
								@tap.stop="uploadmeetingMinutes(item.id)">
								<text>上传会议纪要</text>
							</view>
							<view class="item-button" v-if="item.role_type == 1 && item.status == 9 && item.is_jiyao >= 1"
								@tap.stop="gomeetingMinutes(item.id)">
								<text>修改会议纪要</text>
							</view>
							<view class="item-button" v-if="item.role_type == 1 && (item.status == 1 || item.status == 8)" @click.stop="quicktipclick(item)">
								<text>一键提醒</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<u-loadmore v-if="dataList2.length" :status="loadStatus" />

			<u-empty v-if="!dataList2.length && !isLoading" mode="data"
				icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
		<!-- 待进行 -->
		<view class="list" v-if="activeIndex == 2 ">
			<view class="list-item" v-for="(item,index) in dataList3" :key="index" @click="godetails(item.id)">
				<view class="item-tile">
					<view class="item-img">
						<u--image :src=item.user.avatar shape="circle" width="44rpx" height="44rpx">
						</u--image>
					</view>
					<view class="title">{{item.title}}</view>
					<text v-if="item.status == 1" class="state state1">待进行</text>
					<text v-if="item.status == 8" class="state state2">进行中</text>
					<text v-if="item.status == 9" class="state state3">已结束</text>
					<text v-if="item.status == -1" class="state state3">已取消</text>
					<text v-if="item.status == 0" class="state state4">待上传</text>
					<text v-if="item.status == 2 || item.status == 3" class="state state5">待审核</text>
					<text v-if="item.status == 21 || item.status == 31" class="state state6">被驳回</text>
				</view>

				<view class="item-info">
					<view class="address">
						{{item.type_name}} I {{item.room.title}}
					</view>
					<view class="time">
						{{item.time}}
					</view>
					<view class="u-flex" v-if="item.is_yiti==1">
						<view v-if="item.is_topic==0" class="item-button" @tap.stop="gotouploadTopics(item.id)">
							<text>上传议题</text>
						</view>
						<view v-if="item.is_topic==1" class="item-button" @tap.stop="gotoTopics(item.id)">
							<text>查看议题</text>
						</view>
					</view>
					<view class="u-flex">
						<!-- <view v-if="item.type==3" class="item-button" @tap.stop="gotoPlan(item.id)">
							<text>部门工作计划</text>
						</view> -->
						<!-- <view v-if="item.is_topic==1" class="item-button" @tap.stop="gotoTopics(item.id)">
							<text>查看议题</text>
						</view> -->
					</view>
					<!-- <view class="item-button" @tap.stop="">
						<text>修改议题</text>
					</view> -->
				</view>
			</view>
			<!-- 加载更多 -->
			<u-loadmore v-if="dataList3.length" :status="loadStatus" />

			<u-empty v-if="!dataList3.length && !isLoading" mode="data"
				icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
    <!-- 进行中 -->
    <view class="list" v-if="activeIndex == 3 ">
      <view class="list-item" v-for="(item,index) in dataList4" :key="index" @click="godetails(item.id)">
        <view class="item-tile">
          <view class="item-img">
            <u--image :src=item.user.avatar shape="circle" width="44rpx" height="44rpx">
            </u--image>
          </view>
          <view class="title">{{item.title}}</view>
          <text v-if="item.status == 1" class="state state1">待进行</text>
          <text v-if="item.status == 8" class="state state2">进行中</text>
          <text v-if="item.status == 9" class="state state3">已结束</text>
          <text v-if="item.status == -1" class="state state3">已取消</text>
          <text v-if="item.status == 0" class="state state4">待上传</text>
          <text v-if="item.status == 2 || item.status == 3" class="state state5">待审核</text>
          <text v-if="item.status == 21 || item.status == 31" class="state state6">被驳回</text>
        </view>

        <view class="item-info">
          <view class="address">
            {{item.type_name}} I {{item.room.title}}
          </view>
          <view class="time">
            {{item.time}}
          </view>
          <view class="u-flex" v-if="item.is_yiti==1">
            <view v-if="item.is_topic==0" class="item-button" @tap.stop="gotouploadTopics(item.id)">
              <text>上传议题</text>
            </view>
            <view v-if="item.is_topic==1" class="item-button" @tap.stop="gotoTopics(item.id)">
              <text>查看议题</text>
            </view>
          </view>
          <view class="u-flex">
            <!-- <view v-if="item.type==3" class="item-button" @tap.stop="gotoPlan(item.id)">
              <text>部门工作计划</text>
            </view> -->
            <!-- <view v-if="item.is_topic==1" class="item-button" @tap.stop="gotoTopics(item.id)">
              <text>查看议题</text>
            </view> -->
          </view>
          <!-- <view class="item-button" @tap.stop="">
            <text>修改议题</text>
          </view> -->
        </view>
      </view>
      <!-- 加载更多 -->
      <u-loadmore v-if="dataList4.length" :status="loadStatus" />

      <u-empty v-if="!dataList4.length && !isLoading" mode="data"
               icon="http://cdn.uviewui.com/uview/empty/car.png">
      </u-empty>
    </view>

	</view>
</template>

<script>
	import {
		getpartakeMeet,
		getreleaseMeet,
		getrelevantMeet,
		sendNotice,
    gettopicsMeet
	} from '@/api/meetApi.js'
	import {
		signListOut
	} from "../../../api/meetApi";
	export default {
		data() {
			return {
				tabList: [{
					name: '已结束',
				}, {
					name: '我发布的',
				}, {
					name: '待进行'
				}, {
          name: '进行中'
        }],
				activeIndex: 0,
				page: 1,
				limit: 12,
				lastPage: 0,
				dataList1: [],
				dataList2: [],
				dataList3: [],
        dataList4: [],
				loadStatus: '',
				qr_url: ''
			};
		},
		onShow() {
			this.dataList1 = []
			// console.log("===========activeIndex",uni.getStorageSync('tab_cur_index'));
			// this.activeIndex = uni.getStorageSync('tab_cur_index');
			this.page = 1;
			if (this.activeIndex == 0) {
				this.dataList1 = []
				this.getDataList1()
			} else if (this.activeIndex == 1) {
				this.dataList2 = []
				this.getDataList2()
			} else if (this.activeIndex == 2) {
				this.dataList3 = []
				this.getDataList3()
			} else if (this.activeIndex == 3)  {
        this.dataList4 = []
        this.getDataList4()
      }
		},
		onReachBottom: function() {
			if (this.page < this.lastPage) {
        this.page += 1;
        if (this.activeIndex == 0) {
          this.getDataList1()
        } else if (this.activeIndex == 1) {
          this.getDataList2()
        } else if (this.activeIndex == 2) {
          this.getDataList3()
        } else  if (this.activeIndex == 3) {
          this.getDataList4()
        }
      }
		},
		methods: {
			//一键提醒
			quicktipclick(item) {
				let _this=this;
				this.isLoading = true;
				let params = {
					meet_id: item.id
				};
				sendNotice(params).then(res => {
					this.isLoading = false;
					_this.$toast('发送成功');
				})
			},
			dosignListOut(item) {
				this.isLoading = true;
				let params = {
					meet_id: item.id
				};
				signListOut(params).then(res => {
					this.isLoading = false;
					this.qr_url = res.data.qr_url;
					res.data.mimetype = 'application'
					this.handleDownload(res.data)
				})
			},
			// 点击附件预览
			handleDownload(item) {
				console.log("=====item", item)
				let params = {
					url: item.fullurl, // 需要预览文件的地址(必填，可以使用相对路径)
					name: item.filename, // 需要预览文件的文件名(不填的话取url的最后部分)
					size: item.filesize, // 需要预览文件的字节大小(必填)
					type: item.mimetype
				}
				this.$store.dispatch('yulan', params)
			},
			tabChange(item) {
				console.log('item', item);
				this.activeIndex = item.index;
				// uni.setStorageSync('tab_cur_index',this.activeIndex);
				this.page = 1;
				this.lastPage = 0;
				this.loadStatus = "";
				if (this.activeIndex == 0) {
					this.dataList1 = []
					this.getDataList1()
				} else if (this.activeIndex == 1) {
					this.dataList2 = []
					this.getDataList2()
				} else if (this.activeIndex == 2){
					this.dataList3 = []
					this.getDataList3()
				}else if (this.activeIndex == 3){
          this.dataList4 = []
          this.getDataList4()
        }
			},
			changTiem(index) {
				this.activeNum = index;
			},
			// 我参与的列表
			getDataList1() {
				this.loadStatus = 'loading';
				this.isLoading = true;
				let params = {
					page: this.page,
					limit: this.limit,
					status:9
				};
				getpartakeMeet(params).then(res => {
					this.isLoading = false;
					uni.stopPullDownRefresh();
					console.log(res)
					this.lastPage = res.data.last_page
					this.loadStatus = this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					this.dataList1 = [...this.dataList1, ...res.data.data]
				})
			},
			// 我发布的列表
			getDataList2() {
				this.loadStatus = 'loading';
				this.isLoading = true;
				let params = {
					page: this.page,
					limit: this.limit
				};
				getreleaseMeet(params).then(res => {
					this.isLoading = false;
					uni.stopPullDownRefresh();
					console.log(res, 111)
					this.lastPage = res.data.last_page
					this.loadStatus = this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					this.dataList2 = [...this.dataList2, ...res.data.data]
					this.dataList2.map(e => {
						e.ismore = 0
					})
				})
			},
			// 我相关的列表
			getDataList3() {
				this.loadStatus = 'loading';
				this.isLoading = true;
				let params = {
					page: this.page,
					limit: this.limit,
					status:1
				};
				getrelevantMeet(params).then(res => {
					this.isLoading = false;
					uni.stopPullDownRefresh();
					console.log(res)
					this.lastPage = res.data.last_page
					this.loadStatus = this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					this.dataList3 = [...this.dataList3, ...res.data.data]
				})
			},
      // 进行中的列表
      getDataList4() {
        this.loadStatus = 'loading';
        this.isLoading = true;
        let params = {
          page: this.page,
          limit: this.limit,
          status:8
        };
        getrelevantMeet(params).then(res => {
          this.isLoading = false;
          uni.stopPullDownRefresh();
          console.log(res)
          this.lastPage = res.data.last_page
          this.loadStatus = this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
          this.dataList4 = [...this.dataList4, ...res.data.data]
        })
      },
			godetails(id) {
				uni.navigateTo({
					url: '/pages/tabbar-1-detial/meetingDetails/meetingDetails?id=' + id
				});
			},
			uploadmeetingMinutes(id) {
				uni.navigateTo({
					url: '/pages/tabbar-1-detial/uploadMeetingRecord/uploadMeetingRecord?id=' + id
				});
			},
			// 会议纪要
			gomeetingMinutes(id) {
				uni.navigateTo({
					url: '/pages/tabbar-1-detial/meetingMinutes/meetingMinutes?id=' + id
				});
			},
			// 上传议题
			gotouploadTopics(id) {
			  let params = {
          meet_id:id
        }
        gettopicsMeet(params).then(res => {
          if(res.code=='1'){
            if(res.data.can=='1'){
                uni.navigateTo({
                  url: '/pages/tabbar-1-detial/uploadTopics/uploadTopics?id=' + id
                });
              }else{
                uni.showToast({
                  title: '上传议题时间已截止',
                  icon: "none",
                  duration: 1000
                });
              }
            }
        })

			},
			// 议题详情
			gotoTopics(id) {
				uni.navigateTo({
					url: '/pages/tabbar-1-detial/topics/topics?id=' + id
				});
			},
			// 议题详情
			gotoPlan(id) {
				uni.navigateTo({
					url: '/pages/feedback/feedback?meet_id=' + id
				});
			},
			isclickmore(index) {
				this.dataList2.forEach((e,i) => {
					if(i===index){
						console.log("333",index,i);
						e.ismore = !e.ismore
					}else{
						e.ismore =0
					}
				})
				this.$forceUpdate()//强制刷新
			}
		}
	};
</script>

<style>
	.content {
		background-color: #F8F8F8;
		min-height: 100vh;
	}

	.u-flex {
		display: flex;
		margin-top: 10rpx;
	}

	.u-flex .item-button:last-child {
		margin-left: 20rpx;

	}

	.tab-box {
		padding: 20rpx 0;
		background-color: #fff;
		border-bottom: 6rpx solid #F8F8F8;
	}

	.time-box {
		padding: 28rpx 30rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-weight: 500;
		background: #fff;
	}

	.serach {
		margin-left: auto;
		width: 32rpx;
		height: 32rpx;
	}

	.tiem-tiem {
		padding: 14rpx 26rpx;
		background: #F3F3F3;
		color: #999999;
		border-radius: 162px 162px 162px 162px;
		opacity: 1;
		margin-right: 28rpx;
	}

	.active {
		opacity: 1;
		background-color: #fff;
		border: 1px solid #4871C0;
		color: #4871C0;
	}

	.list {
		padding: 20rpx 24rpx;
	}

	.list-item {
		padding: 30rpx 24rpx 30rpx 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.item-info {
		margin-left: 10rpx;
		padding-left: 42rpx;
	}

	.item-tile {
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
	}

	.item-img {
		margin-right: 10rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		/* width: 78%; */
		/* white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; */
		/* border: 1px solid red; */
		margin-right: 20rpx;
	}

	.title1 {
		width: 100%;
	}

	.state {
		font-size: 24rpx;
		font-weight: 500;
		padding: 10rpx 12rpx;
	}

	.state1 {
		color: #8B48C0;
		background: #F8EEFF;
		border-radius: 8rpx;
		opacity: 1;
	}

	.state2 {
		color: #4871C0;
		background: #EBF1FD;
		border-radius: 8rpx;
		opacity: 1;
	}

	.state3 {
		color: #999999;
		background: #F5F2F5;
		border-radius: 8rpx;
		opacity: 1;
	}

	.state4 {
		color: #26B167;
		background: #F2FFF8;
		border-radius: 8rpx;
		opacity: 1;
	}

	.state5 {
		color: #FA6161;
		background: #FFF0F0;
		border-radius: 8rpx;
		opacity: 1;
	}

	.state6 {
		color: #FF7A00;
		background: #FFECDA;
		border-radius: 8rpx;
		opacity: 1;
	}

	.address {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		margin-top: 10rpx;
	}

	.time {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		margin-top: 10rpx;
	}

	.item-button {
		text-align: right;
		margin-top: 10rpx;
	}

	.item-button text {
		text-align: center;
		display: inline-block;
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
		width: 186rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: #4871C0;
		border-radius: 16rpx;
		opacity: 1;
	}

	.item-button {
		text-align: right;
		margin-top: 10rpx;
	}

	.item-button text {
		text-align: center;
		display: inline-block;
		font-size: 28rpx;
		font-weight: 500;
		color: #4871C0;
		width: 186rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: #F1F6FF;
		border-radius: 16rpx;
		opacity: 1;
	}

	.button-item1 {
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		margin: 0 16rpx;
		padding: 26rpx 0;
		border-bottom: 1px solid #F5F5F5;
	}

	.moreAction {
		border-radius: 16rpx;
		background-color: #ffffff;
		position: absolute;
		top: 90%;
		left: 10rpx;
		z-index: 10;
		width: 200rpx;
		border: 1px solid #dddddd;
	}

	.moreAction::before {
		content: '';
		top: -20rpx;
		left: 30%;
		position: absolute;
		width: 0;
		height: 0;
		border-bottom: 20rpx solid #F5F5F5;
		border-right: 20rpx solid transparent;
		border-left: 20rpx solid transparent;
	}
</style>
